<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=0.5, maximum-scale=0.5,minimum-scale=0.5,user-scalable=0" />
    <title>课程列表</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(to bottom, #96c4fd, #adcefc);
            margin: 0;

        }

        #course-list {
            overflow: hidden;
            width: 1200px;
            margin: 0 auto;
            padding: 20px;
            min-height: calc(100vh - 200px);
            padding-top: 40px;
        }

        .course {
            background-color: #fff;
            border-radius: 5px;
            /* padding: 10px; */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 23%;
            float: left;
            margin: 0 10px;
            margin-bottom: 20px;
            box-sizing: border-box;
            cursor: pointer;
            padding-bottom: 10px;
        }

        .course h2 {
            margin-top: 10px;
            font-size: 14px;
            padding: 0 10px;
        }

        .course p {
            margin-bottom: 0;
            color: #666;
            font-size: 12px;
            padding: 0 10px;
        }

        .placeholder {
            background-color: #ddd;
            height: 150px;
            border-radius: 5px;
            overflow: hidden;
        }

        .placeholder img {
            width: 100%;
        }

        .pagination {
            margin-top: 20px;
            width: 1200px;
            margin: 0 auto;
            text-align: center;
            font-size: 14px;
            display: flex;
            justify-content: center;
        }

        .pagination a,
        .pagination span {
            color: #666;
            text-decoration: none;
            /* margin-right: 10px; */
            /* border: 1px solid #007bff; */
            padding: 5px 10px;
            border-radius: 3px;
            background-color: transparent;
            transition: all 0.3s ease;
            border-radius: 5px;
        }

        .pagination a:hover {
            background-color: #000;
            color: #fff;
        }

        .pagination .active a {
            background-color: #333;
            color: #fff;
        }

        .search-container {
            margin-bottom: 20px;
            margin: 0 auto;
            background-color: #f4f4f4;
            padding: 20px 100px;
            box-sizing: border-box;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .search-container input[type=text] {
            padding: 10px;
            margin-right: 10px;
            border: none;
            border-radius: 3px;
        }

        .search-container button {
            padding: 6px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 10px;
        }

        .search-container button:hover {
            background-color: #0056b3;
        }
        .search-box{
            width: 1150px;
            margin: 0 auto;
        }
        .header-bg {
            height: 60px;
            background: #000;
            line-height: 60px;
            padding: 0 100px;
            overflow: hidden;
        }
        .header-nav li{
            float: left;
            list-style: none;
            width: 80px;
            text-align: center;
        }
        .header-nav li a {
            color: #fff;
            display: inline-block;
            text-align: center;
        }

        .header-nav li a:hover {
            color: #007bff;
            text-decoration: none;
        }

        .header-nav li.active a{
            color: #007bff !important;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="header-bg">
        <!--导航-->
        <div class="header-nav">
            <li><a href="./index.html">首页</a></li>
            <li class="active"><a href="./course.html">课程</a></li>
            <li><a href="./spectrumList.html">谱例</a></li>
        </div>
    </div>
    <div class="search-container">
        <div class="search-box">
            <input type="text" id="search-input" class="form-control" placeholder="请输入课程名称"
                style="width: 200px; float: left;">
            <select id="price-range" class="form-control" style="width: 200px; border:none;float: left;">
                <option value="">所有价格</option>
                <option value="0-5">0-5元</option>
                <option value="5-10">5-10元</option>
                <option value="10-15">10-15元</option>
            </select>
            <button id="search-btn">搜索</button>
        </div>
    </div>

    <div id="course-list"></div>
    <div class="pagination"></div>

    <script src="./js/jquery.js"></script>
    <script>
        $(document).ready(function () {
            // 模拟课程数据
            var courses = [
                { title: "课程1", description: "这是课程1的描述", price: "1.00元" },
                { title: "课程2", description: "这是课程2的描述", price: "2.00元" },
                { title: "课程3", description: "这是课程3的描述", price: "3.00元" },
                { title: "课程4", description: "这是课程4的描述", price: "4.00元" },
                { title: "课程5", description: "这是课程5的描述", price: "5.00元" },
                { title: "课程6", description: "这是课程6的描述", price: "6.00元" },
                { title: "课程7", description: "这是课程7的描述", price: "7.00元" },
                { title: "课程8", description: "这是课程8的描述", price: "8.00元" },
                { title: "课程9", description: "这是课程9的描述", price: "9.00元" },
                { title: "课程10", description: "这是课程10的描述", price: "10.00元" },
                { title: "课程11", description: "这是课程11的描述", price: "11.00元" },
                { title: "课程12", description: "这是课程12的描述", price: "12.00元" },
                { title: "课程12", description: "这是课程12的描述", price: "12.00元" }
            ];

            var currentPage = 1;
            var pageSize = 12;

            function renderCourses(page, keyword, priceRange) {
                $("#course-list").empty();
                var filteredCourses = courses;
                if (keyword) {
                    filteredCourses = courses.filter(function (course) {
                        return course.title.toLowerCase().includes(keyword.toLowerCase());
                    });
                }
                if (priceRange) {
                    var minPrice = parseFloat(priceRange.split('-')[0]);
                    var maxPrice = parseFloat(priceRange.split('-')[1]);
                    filteredCourses = filteredCourses.filter(function (course) {
                        var price = parseFloat(course.price.replace('元', ''));
                        return price >= minPrice && price <= maxPrice;
                    });
                }
                var start = (page - 1) * pageSize;
                var end = start + pageSize;
                var totalPages = Math.ceil(filteredCourses.length / pageSize);

                for (var i = start; i < end && i < filteredCourses.length; i++) {
                    var course = filteredCourses[i];
                    var courseHtml = '<div class="course">';
                    courseHtml += '<div class="placeholder"><img src="./images/img.jpg"></div>';
                    courseHtml += '<h2>' + course.title + '</h2>';
                    // courseHtml += '<p>' + course.description + '</p>';
                    courseHtml += '<p style="color:red;font-weight:bold;">￥' + course.price + '</p>';
                    courseHtml += '</div>';
                    $("#course-list").append(courseHtml);
                }

                $(".pagination").empty();
                if (currentPage > 1) {
                    $(".pagination").append('<a href="#" data-page="' + (currentPage - 1) + '">上一页</a>');
                }
                for (var i = 1; i <= totalPages; i++) {
                    var pageLink = '<a href="#" data-page="' + i + '">' + i + '</a>';
                    if (i === currentPage) {
                        pageLink = '<span class="active"><a href="#" data-page="' + i + '">' + i + '</a></span>';
                    }
                    $(".pagination").append(pageLink);
                }
                if (currentPage < totalPages) {
                    $(".pagination").append('<a href="#" data-page="' + (currentPage + 1) + '">下一页</a>');
                }

                $(".pagination a").click(function (e) {
                    e.preventDefault();
                    var page = $(this).data("page");
                    currentPage = page;
                    renderCourses(currentPage, $("#search-input").val(), $("#price-range").val());
                });
            }

            $("#search-btn").click(function () {
                var keyword = $("#search-input").val();
                var priceRange = $("#price-range").val();
                renderCourses(currentPage, keyword, priceRange);
            });

            // course click
            $("#course-list").on("click", ".course", function (e) {
                window.location.href = "courseDetails.html" + "?id=" + $(this).data("course-id");
            })

            renderCourses(currentPage);
        });
    </script>
</body>

</html>